<template>
  <div class="code-box">
    <h3 class="code-box-title">4、自定义ref使用cutomeRef</h3>
    <pre>
      可以使用hooks封装一个自定义ref，代码如下 :
      <code>
        let temp = "hello"
        const inputRef = customRef((track, trigger) => {
          return {
            get() {
              track()
              return temp
            },
            set(value) {
              temp = value;
              trigger();
            }
          }
        })
      </code>
    </pre>
    <div>
      <p>{{ msg }}</p>
      <input type="text" v-model="msg" />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useCustomRef } from './useCustomeRef';

const msg = useCustomRef("hello", 1000); //使用自定义hooks
console.log(msg);

</script>

<style scoped lang='scss'>
.code-box {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  min-height: 50px;

  &-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.btn.active {
  background-color: #f0a80d;
  color: #fff;
}

pre {
  margin: 0;
}
</style>
